import React, { useState, useEffect } from 'react'
import { Outlet, NavLink } from 'react-router-dom'
import style from './style.module.css'
import { homeRoutes } from '../../router/router_config'
import img1 from '../../static/tabbar_icon/首页1.png'
import aimg1 from '../../static/tabbar_icon/首页2.png'
import img2 from '../../static/tabbar_icon/更多1.png'
import aimg2 from '../../static/tabbar_icon/更多2.png'
import img3 from '../../static/tabbar_icon/发现1.png'
import aimg3 from '../../static/tabbar_icon/发现2.png'
import img4 from '../../static/tabbar_icon/商铺1.png'
import aimg4 from '../../static/tabbar_icon/商铺2.png'
import img5 from '../../static/tabbar_icon/我的1.png'
import aimg5 from '../../static/tabbar_icon/我的2.png'
import { useSelector, useDispatch } from 'react-redux'
import axios from '../../utlis/axios'
import { pushNewHouseList } from '../../store/reducer/new_house'
import { pushRantHouseList } from '../../store/reducer/rant_house'


function Index({ }) {
    const tabs = [
        {
            img: img1,
            activeImg: aimg1,
        },
        {
            img: img2,
            activeImg: aimg2,
        },
        {
            img: img3,
            activeImg: aimg3,
        },
        {
            img: img4,
            activeImg: aimg4,
        },
        {
            img: img5,
            activeImg: aimg5,
        }
    ]
    useEffect(() => {
        getData()
        getRantData()
    }, [])
    const dispatch = useDispatch()
    const getData = async () => {
        let res = await axios.get('/api/house_list')
        dispatch(pushNewHouseList(JSON.parse(JSON.stringify(res.house_list))))
    }
    const getRantData = async () => {
        let res = await axios.get('/api/rant_out_house_list')
        dispatch(pushRantHouseList(JSON.parse(JSON.stringify(res.rant_out_house_list))))
    }
    const [activeIndex, setActiveIndex] = useState(0)

    return (
        <div className={style['index-wapper']}>
            <div className={style['index-container']}>
                <Outlet></Outlet>
            </div>
            <div className={style['index-tabber']}>
                {
                    homeRoutes && homeRoutes.map((item, index) => {
                        return <div className={style['tabber-item']} key={index} onClick={() => setActiveIndex(index)}>
                            <NavLink to={item.path}>
                                <div className={style['tabber-item-dl']}>
                                    <div><img src={index == activeIndex ? tabs[index].activeImg : tabs[index].img} alt="" /></div>
                                    <div style={{ color: index == activeIndex ? '#5396FF' : '' }}>{item.meta?.title}</div>
                                </div>

                            </NavLink>
                        </div>
                    })
                }
            </div>
        </div>
    )
}

export default Index